.progress-loading-table {
    display: block;
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0);
    transition: all .3s;
    overflow: hidden;
}

.progress-loading-table::-moz-progress-bar {
    background: rgba(255, 255, 255, 0);
}

.progress-loading-table::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0);
}

.progress-loading-table::-webkit-progress-value {
    // background: rgba(31, 181, 172, .3);
    background-color: rgba($color: $theme_color, $alpha: .3)
}

.progress-loading-table::after {
    content: '';
    position: absolute;
    top: -50%;
    /* bottom: 0; */
    left: -100%;
    width: 24px;
    height: 200%;
    background: rgba(255, 255, 255, .3);
    transform: rotate(40deg);
    animation: MoveF 2s infinite;
}

@keyframes MoveF {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

.progress-loading {
    display: inline-block;
    height: 6px;
    background-color: $side_b;
    border-radius: 20px;
}

.progress-loading::-moz-progress-bar {
    background-color: $side_b;
    border-radius: 20px;
}

.progress-loading::-webkit-progress-bar {
    background-color: $side_b;
    border-radius: 20px;
}

.progress-loading::-webkit-progress-value {
    background-color: currentColor;
    transition: all 1s;
    border-radius: 20px;
}

.wave-box {
    position: relative;
    display: inline-block;
    border: 2px solid $theme_color;
    border-radius: 50%;

    .pip-content {
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: 50%;
        z-index: 30;
    }

    &>.wave {
        position: relative;
        width: var(--radius);
        height: var(--radius);
        background-color: $theme_color;
        border-radius: 50%;
        overflow: hidden;

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: calc(2*var(--radius));
            height: calc(2*var(--radius));
            top: calc(-1*var(--percent));
            left: -50%;
            background-color: rgba(255, 255, 255, .4);
            border-radius: 45%;
            transform: rotate(0);
            animation: rotate 6s linear infinite;
            z-index: 10;
        }

        &::after {
            border-radius: 47%;
            background-color: rgba(255, 255, 255, .9);
            transform: rotate(0);
            animation: rotate 10s linear -5s infinite;
            z-index: 20;
        }
    }
}

@keyframes rotate {
    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.progress-pie {
    position: relative;
    display: inline-block;
    background-color: $side_b;
    border-radius: 50%;
    overflow: hidden;

    .pip-content {
        position: absolute;
        width: 86%;
        height: 86%;
        background-color: #fff;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: 50%;
        z-index: 9;
    }

    .pie-left,
    .pie-right {
        width: 50%;
        height: 100%;
        float: left;
        position: relative;
        overflow: hidden;
    }

    .pie-left::before,
    .pie-right::before,
    .pie-right::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: currentColor;
    }

    .pie-left::before {
        left: 100%;
        transform-origin: left;
        transform: rotate(calc(3.6deg * (var(--percent) - 50)));
        /* 左半区前50%进度不显示 */
        opacity: calc(100 * (var(--percent) - 50));
    }

    .pie-right::before {
        right: 100%;
        transform-origin: right;
        transform: rotate(calc(3.6deg * var(--percent)));
    }

    .pie-right::after {
        /* 右半区覆盖层后50%进度显示 */
        opacity: calc(100 * (var(--percent) - 50));
    }
}

.wave-box-seed {
    display: inline-block;
    border: 4px solid #26a597;
    border-radius: 50%;

    &>.wave {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #26a597;
        border-radius: 50%;
        overflow: hidden;

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            top: 50px;
            left: 50%;
            background-color: rgba(255, 255, 255, .4);
            border-radius: 45%;
            transform: translate(-50%, -70%) rotate(0);
            animation: rotate-seed 6s linear infinite, vertical-seed 12s linear infinite;
            z-index: 10;
        }

        &::after {
            border-radius: 47%;
            background-color: rgba(255, 255, 255, .9);
            transform: translate(-50%, -70%) rotate(0);
            animation: rotate-seed 10s linear -5s infinite, vertical-seed 12s linear infinite;
            z-index: 20;
        }
    }
}

@keyframes rotate-seed {
    50% {
        transform: translate(-50%, -73%) rotate(180deg);
        top: 100px;
    }

    100% {
        transform: translate(-50%, -70%) rotate(360deg);
        top: 0;
    }
}

@keyframes vertical-seed {
    0% {
        top: -50px;
    }

    50% {
        top: 50px;
    }

    100% {
        top: -50px;
    }
}
